<template>
    <div>
        <condition-card label-width="110px">
            <el-row :gutter="20" style="height: 50px;">
                <el-col :span="6" v-for="option in options" :key="option.key">
                    <el-form-item :label="option.label" :label-width="formLabelWidth">
                        <el-select
                            v-if="!option.type"
                            v-model="queryForm[option.key]"
                            @change="option.changeCallback"
                        >
                            <el-option
                                v-for="item in option.data"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                        <el-date-picker
                            v-if="option.type==='datePicker'"
                            v-model="queryForm[option.key]"
                            type="date"
                            placeholder="选择日期"
                        ></el-date-picker>
                        <SchoolCalendarSelect
                            v-if="option.type==='term'"
                            v-model="queryForm.calendarId"
                            :filterable="true"
                            @load-done="loadDone"
                        ></SchoolCalendarSelect>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
    </div>
</template>
<script>
export default {
    props: {
        options: {
            type: Array,
            required: true
        },
        queryForm: {
            type: Object,
            required: true
        },
        buttons: {
            type: Array,
            required: true
        },
        formLabelWidth: {
            type: String,
            required: false,
            default: "100px"
        }
    },
    computed: {
        computedSpan() {
            if (!this.options) {
                return 0;
            }
            let a = this.options.length % 4;
            return (3 - a) * 6;
        }
    },
    data() {},
    methods: {
        loadDone(data) {
            this.options.calendarList = data;
        }
    }
};
</script>
<style>
</style>
